<template>
  <div v-show="show">
    <div class="dialog_cover" style="z-index: 10" @click.prevent="close"></div>
    <!--单选 QQ等级选择-->
    <div class="bottom-bomb bomb-danxuan bg-f1" style="z-index: 11" v-if="property && property.controlType === TYPE.RADIO">
      <div class="bomb-title border-bottom border-top bg-fff">
        <h1 class="f32 color-666 text-center">{{property.propertyName}}</h1>
        <i class="bomb-close" @click="close"></i>
      </div>
      <div class="bomb-content">
        <ul class="bomb-li-item bg-fff">
          <li class="border-bottom" v-for="item in property.values" @click="changeItem(item, TYPE.RADIO)">
            <span class="f32 color-000">{{item.value}}</span>
          </li>
        </ul>
      </div>
    </div>
    <!--多选 稀有皮肤选择-->
    <div class="bottom-bomb bomb-duoxuan " style="z-index: 11" v-if="property && property.controlType === TYPE.MULTIPLE">
      <div class="bomb-title border-bottom border-top bg-fff">
        <h1 class="f32 color-666 text-center">{{property.propertyName}}</h1>
        <i class="bomb-close" @click="close"></i>
      </div>
      <div class="bomb-content bg-fff">
        <ul class="bomb-li-item clearfix px-30 pt-30 ">
          <li class="fl border text-center" :class="{'selected': item.checked}" v-for="item in property.values" @click="changeItem(item, TYPE.MULTIPLE)">
            <span class="f30 color-000">{{item.value}}</span>
            <i class="icon-select"></i>
          </li>
        </ul>
      </div>
      <div class="bomb-commit bg-m1 text-center" @click="confirm"><span class="color-fff f36">确定</span></div>
    </div>
  </div>
</template>

<script>
  /**
   * 多选和单选
   */
  export default {
    props: [
      'TYPE',
      'show',
      'chooseProperty'
    ],
    computed: {
      property() {
        return this.chooseProperty
      }
    },
    methods: {
      changeItem(item, type) {
        this.$emit('changeItem', {property: this.chooseProperty, item, type})
      },
      /* 多选框点击确定 */
      confirm() {
        this.$emit('selectPropertyConfirm', this.chooseProperty)
      },
      /* 关闭选择 */
      close() {
        this.$emit('close')
      },

    }
  }
</script>
